<script setup>
	import {
		ref
	} from 'vue';
	import smallPic1 from "../assets/galary/1-small.jpg"
	import smallPic2 from "../assets/galary/2-small.jpg"
	import smallPic3 from "../assets/galary/3-small.jpg"
	import smallPic4 from "../assets/galary/4-small.jpg"
	import pic1 from "../assets/galary/1.jpg"
	import pic2 from "../assets/galary/2.jpg"
	import pic3 from "../assets/galary/3.jpg"
	import pic4 from "../assets/galary/4.jpg"
	import placeholder from "../assets/galary/placeholder.png"

	const netImageUrl = ref('https://inews.gtimg.com/news_bt/O7ZsQ9IrSfcWAWLPeaRcfeEt5FdyeTfnFYrSGmDSKlU0sAA/1000')

	const imageUrl = ref(placeholder)
	const imageDes = ref('选择一个图片')
	const photos = ref([{
			alt: '美女1',
			title: '美女A',
			smallPic: smallPic1,
			bigPic: pic1
		},
		{
			alt: '美女2',
			title: '美女B',
			smallPic: smallPic2,
			bigPic: pic2
		},
		{
			alt: '美女3',
			title: '美女C',
			smallPic: smallPic3,
			bigPic: pic3
		},
		{
			alt: '美女4',
			title: '美女D',
			smallPic: smallPic4,
			bigPic: pic4
		}
	])

	function galaryItemClick(item) {
		imageUrl.value = item.bigPic
		imageDes.value = item.title
	}
</script>

<template>
	<h2 class="bodyfont">美女画廊</h2>
	<a href="#">注册</a>
	<ul id="imagegallery">
		<li v-for="photo in photos">
			<img width="100" :src="photo.smallPic" :alt="photo.alt" @click="galaryItemClick(photo)" />
		</li>
	</ul>

	<div style="clear:both"></div>

	<img id="image" :src="imageUrl" width="450px" />
	<img id="image" :src="netImageUrl" width="450px" style="margin-left: 10em;" />

	<p id="des">{{imageDes}}</p>

</template>

<style scoped>
	.bodyfont {
		font-family: "Helvetica", "Arial", serif;
		color: #5af;
		margin: 1em 10%;
	}

	h1 {
		color: #333;
		background-color: transparent;
	}

	a {
		color: #c60;
		background-color: transparent;
		font-weight: bold;
		text-decoration: none;
	}

	ul {
		padding: 0;
	}

	li {
		float: left;
		padding: 1em;
		list-style: none;
	}

	#imagegallery {

		list-style: none;
	}

	#imagegallery li {
		margin: 0px 20px 20px 0px;
		padding: 0px;
		display: inline;
	}

	#imagegallery li a img {
		border: 0;
	}
</style>